<template>
    <div class="login-container">
        <div class="title-top">鄂尔多斯水生态补奖</div>
        <div class="form-card">
            <div class="title-container">
                <h3 class="title">欢&nbsp;&nbsp;迎&nbsp;&nbsp;登&nbsp;&nbsp;录</h3>
            </div>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="用户名" name="username">
                        <img slot="prefix" src="@/assets/login/user.png" alt="" />
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="密码" name="password" show-password
                        @keyup.enter.native="handleLogin">
                        <img slot="prefix" src="@/assets/login/password.png" alt="" />
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button :loading="loading" type="primary" style="width: 100%"
                @click.native.prevent="handleLogin">登录</el-button>
        </div>
    </div>
</template>

<script>
import * as api from "@/api/login.js"
import { setToken } from '@/utils/auth.js'
export default {
    name: "login",
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
                iclient: "",
            },
            loginRules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请正确输入密码", trigger: "blur" },
                ],
            },
            loading: false,
        };
    },
    methods: {
        handleLogin() {
            console.log(process.env.VUE_APP_BASE_URL);
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    api.login(this.loginForm)
                        .then((res) => {
                            console.log("全部登录信息", res);
                            if (res.data.code == 0) {
                                setToken('USER_TOKEN', res.data.data.token);
                                window.location.replace("index.html");
                            } else {
                                this.$message.error(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="scss">
$bg: #283443;
// $light_gray: #fff;
$light_gray: #283443;
// $cursor: #fff;
$cursor: #283443;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
        color: $cursor;
    }
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

/* reset element-ui css */
.login-container {
    .el-input {
        // display: inline-block;
        height: 47px;
        // width: 100%;

        input {
            background: transparent;
            // background-color: #e5e5e5;
            border: 0px;
            -webkit-appearance: none;
            border-radius: 0px;
            //   padding: 12px 5px 12px 15px;
            color: $light_gray;
            height: 47px;
            caret-color: $cursor;

            &:-webkit-autofill {
                box-shadow: 0 0 0px 1000px #e5e5e5 inset !important;
                -webkit-text-fill-color: $cursor !important;
            }
        }
    }

    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;

        img {
            vertical-align: middle;
        }
    }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
    min-height: 100%;
    width: 100%;
    // background-color: $bg;
    // overflow: hidden;
    background-color: $bg;
    background-image: url("@/assets/login/login.png");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;

    .title-top {
        position: absolute;
        top: 0;
        right: 18%;
        font-size: 45px;
        font-weight: bold;
    }

    .form-card {
        width: 330px;
        margin-right: 20%;

        .title-container {
            text-align: center;
            font-size: 26px;
        }
    }
}
</style>